<template>
	<view class="page-container">
		<!-- 主横幅 -->
		<view class="banner">
			<view class="banner-content">
				<text class="banner-title">探索思想的<text class="highlight">无限可能</text></text>
				<text class="banner-desc">分享技术、生活与思考，记录成长的每一个脚印</text>
				<view class="banner-btns">
					<navigator class="btn primary" v-if="newestArticles._id"
						@click="$router(`/subPackages1/pages/article/look?id=${newestArticles._id}`)">浏览最新技术记录
					</navigator>
					<navigator class="btn secondary" @click="$router('/subPackages1/pages/resume/index')">作者简历
					</navigator>
				</view>
			</view>
		</view>

		<!-- 主内容区 -->
		<view class="main-content">
			<view class="container">
				<view class="content-wrapper">
					<view class="sidebar">
						<!-- 作者信息 -->
						<AuthorInfo></AuthorInfo>

						<!-- 分类 -->
						<view class="sidebar-card categories" v-if="articleClass.length != 0">
							<text class="card-title">技术记录分类</text>
							<view class="category-list">
								<view class="category-item" v-for="(item , index) in articleClass" :key="index">
									<text class="category-name">{{item.name}}</text>
									<text class="category-count">{{item.number}}</text>
								</view>
							</view>
						</view>

						<!-- 热门标签 -->
						<view class="sidebar-card tags">
							<text class="card-title">热门标签</text>
							<view class="tag-list">
								<text class="tag">#Python</text>
								<text class="tag">#JavaScript</text>
								<text class="tag">#React</text>
								<text class="tag">#生活方式</text>
								<text class="tag">#学习方法</text>
								<text class="tag">#人工智能</text>
								<text class="tag">#微服务</text>
								<text class="tag">#前端开发</text>
								<text class="tag">#后端开发</text>
								<text class="tag">#读书笔记</text>
							</view>
						</view>
					</view>

					<!-- 技术记录列表 -->
					<view class="article-list">
						<view class="section-header" v-if="newestArticles._id">
							<text class="section-title">最新技术记录</text>
						</view>

						<view class="featured-article" v-if="newestArticles._id"
							@click="$router(`/subPackages1/pages/article/look?id=${newestArticles._id}`)">
							<view class="featured-img">
								<image :src="newestArticles.coverUrl" mode="aspectFill"></image>
							</view>
							<view class="featured-content">
								<view class="article-meta">
									<text class="category">{{newestArticles.category}}</text>
									<text class="date">{{newestArticles.createTime}}</text>
								</view>
								<navigator url="/pages/article/detail" class="article-title">{{newestArticles.title}}
								</navigator>
								<text class="article-excerpt">{{newestArticles.excerpt}}</text>
							</view>
						</view>

						<!-- 技术记录列表 -->
						<view class="articles" v-if="otherArticles.length != 0">
							<!-- 技术记录1 -->
							<view class="article-item" v-for="(item , index) in otherArticles" :key="index"
								@click="$router(`/subPackages1/pages/article/look?id=${item._id}`)">
								<view class="article-img">
									<image :src="item.coverUrl" mode="aspectFill"></image>
								</view>
								<view class="article-info">
									<view class="article-meta">
										<text class="category">{{item.category}}</text>
										<text class="date">{{item.createTime}}</text>
									</view>
									<navigator url="/pages/article/detail" class="article-title">{{item.title}}
									</navigator>
									<text class="article-excerpt">{{item.excerpt}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 推荐阅读 -->
		<view class="recommended" v-if="recommendationList.length != 0">
			<view class="container">
				<text class="section-title">推荐阅读</text>
				<view class="recommended-list">
					<!-- 推荐技术记录1 -->
					<view class="recommended-item" v-for="(item , index) in recommendationList" :key="index"
						@click="$router(`/subPackages1/pages/article/look?id=${item._id}`)">
						<image :src="item.coverUrl" mode="aspectFill" class="recommended-img">
						</image>
						<view class="recommended-info">
							<view class="article-meta">
								<text class="category">{{item.category}}</text>
								<text class="date">{{item.createTime}}</text>
							</view>
							<navigator url="/pages/article/detail" class="article-title">{{item.title}}</navigator>
							<text class="article-excerpt">{{item.excerpt}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import AuthorInfo from '../../components/authorInfo/index.vue'
	export default {
		components: {
			AuthorInfo
		},
		data() {
			return {
				recommendationList: [],
				addArticles: [], //全部技术记录
				otherArticles: [],
				// 最新的技术记录
				newestArticles: {},
				articleClass: []
			}
		},

		onShareAppMessage(res) {
			return {
				title: '极简记账小程序', // 分享标题
				path: '/pages/index/index', // 分享后打开的页面路径（必须是已配置的页面）
				imageUrl: '/static/share-img.png', // 分享图片（建议尺寸 500*400）
				desc: '简单好用的记账工具' // 分享描述（部分场景可见）
			}
		},

		onShareTimeline() {
			return {
				title: '极简记账小程序，轻松管理收支',
				query: 'from=timeline', // 携带的参数，可用于统计来源
				imageUrl: '/static/share-timeline.png'
			}
		},

		onLoad() {
			this.getisRecommended()
		},

		onPullDownRefresh() {
			this.getisRecommended()
		},

		methods: {
			// 获取非推荐技术记录
			getisRecommended() {
				let parmse = {
					state: "look",
					databaseName: 'articles',
					status: "发布"
				};

				let number = 0;
				let getList = () => {
					number++;
					this.$axios('overallSituation', parmse, true).then(res => {
						if (res.code == 200 && Array.isArray(res.data) && res.data.length != 0) {
							this.addArticles = res.data || [];
							this.newestArticles = res.data[0] || {}
							this.getRecommendationList() //推荐的
							this.getotherArticles() //普通的
							this.classifyStatisticalArticles() //分类统计
						}
						uni.stopPullDownRefresh();
					}).catch((err) => {
						if (number > 5) {
							return;
						} else {
							getList(); //再次请求
						}
					});
				};

				getList();
			},

			// 分类出推荐的技术记录列表
			getRecommendationList() {
				this.recommendationList = []
				this.addArticles.forEach(item => {
					if (item.isRecommended && (item._id != this.newestArticles._id)) {
						this.recommendationList.push(item)
					}
				})
			},

			getotherArticles() {
				this.otherArticles = []
				this.addArticles.forEach(item => {
					if (!item.isRecommended && (item._id != this.newestArticles._id)) {
						this.otherArticles.push(item)
					}
				})
			},

			// 统计技术记录分类
			classifyStatisticalArticles() {
				this.articleClass = []
				this.addArticles.forEach(item => {
					let indexOf = this.articleClass.findIndex(row => row.name == item.category)
					if (indexOf == '-1') {
						this.articleClass.push({
							name: item.category,
							number: 1
						})
					} else {
						this.articleClass[indexOf].number++
					}
				})
			}

		}
	}
</script>

<style scoped>
	/* 基础样式 */
	.page-container {
		font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
		background-color: #f5f5f5;
		color: #333;
		height: 100vh;
	}

	.container {
		width: 98%;
		padding: 0 16px;
		margin: 0 auto;
		box-sizing: border-box;
	}

	/* 导航栏样式 */
	.navbar {
		background-color: #fff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.navbar-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 44px;
		padding: 0 16px;
		box-sizing: border-box;
	}

	.logo {
		display: flex;
		align-items: center;
		color: #333;
		text-decoration: none;
	}

	.logo-icon {
		font-size: 20px;
		color: #3B82F6;
		margin-right: 8px;
	}

	.logo-text {
		font-size: 16px;
		font-weight: bold;
	}

	.nav-desktop {
		display: none;
		align-items: center;
	}

	.nav-link {
		color: #666;
		text-decoration: none;
		margin: 0 12px;
		font-size: 14px;
		padding: 4px 0;
		box-sizing: border-box;
		position: relative;
	}

	.nav-link.active {
		color: #3B82F6;
	}

	.nav-link.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #3B82F6;
	}

	.search-btn {
		background-color: #3B82F6;
		color: #fff;
		border: none;
		border-radius: 4px;
		padding: 6px 12px;
		box-sizing: border-box;
		font-size: 14px;
		margin-left: 12px;
	}

	.menu-btn {
		font-size: 20px;
		color: #333;
	}

	.nav-mobile {
		display: none;
		padding: 12px 16px;
		box-sizing: border-box;
		background-color: #fff;
		border-top: 1px solid #eee;
	}

	.mobile-link {
		display: block;
		color: #333;
		text-decoration: none;
		padding: 10px 0;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
	}

	.search-box {
		margin-top: 12px;
	}

	.search-input {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 14px;
	}

	/* 主横幅样式 */
	.banner {
		background: linear-gradient(135deg, #ebf4ff 0%, #e0eafc 100%);
		padding: 80px 0 40px;
		box-sizing: border-box;
		text-align: center;
	}

	.banner-content {
		max-width: 700px;
		margin: 0 auto;
		padding: 0 16px;
		box-sizing: border-box;
	}

	.banner-title {
		font-size: 28px;
		font-weight: bold;
		color: #1F2937;
		line-height: 1.3;
		margin-bottom: 16px;
		display: block;
	}

	.highlight {
		color: #3B82F6;
	}

	.banner-desc {
		font-size: 16px;
		color: #4B5563;
		margin-bottom: 24px;
		display: block;
		line-height: 1.5;
	}

	.banner-btns {
		display: flex;
		justify-content: center;
		gap: 12px;
		flex-wrap: wrap;
	}

	.btn {
		display: inline-block;
		padding: 10px 20px;
		box-sizing: border-box;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 500;
		text-decoration: none;
	}

	.btn.primary {
		background-color: #3B82F6;
		color: #fff;
	}

	.btn.secondary {
		background-color: transparent;
		color: #3B82F6;
		border: 1px solid #3B82F6;
	}

	/* 主内容区样式 */
	.main-content {
		padding: 40px 0;
		box-sizing: border-box;
	}

	.content-wrapper {
		display: flex;
		flex-direction: column;
		gap: 30px;
	}

	.article-list {
		flex: 1;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.section-title {
		font-size: 20px;
		font-weight: bold;
		color: #1F2937;
	}

	.view-all {
		color: #3B82F6;
		text-decoration: none;
		font-size: 14px;
	}

	.featured-article {
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		margin-bottom: 10px;
	}

	.featured-img {
		width: 100%;
		height: 200px;
	}

	.featured-img image {
		width: 100%;
		height: 100%;
	}

	.featured-content {
		padding: 20px;
		box-sizing: border-box;
	}

	.article-meta {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		gap: 12px;
	}

	.category {
		font-size: 12px;
		padding: 3px 8px;
		box-sizing: border-box;
		border-radius: 4px;
		background-color: #EBF4FF;
		color: #3B82F6;
	}

	.date {
		font-size: 12px;
		color: #6B7280;
	}

	.article-title {
		font-size: 18px;
		font-weight: bold;
		color: #1F2937;
		text-decoration: none;
		display: block;
		margin-bottom: 12px;
		line-height: 1.4;
	}

	.article-excerpt {
		font-size: 14px;
		color: #4B5563;
		line-height: 1.6;
		margin-bottom: 16px;
		display: block;
	}

	.article-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.author {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.avatar {
		width: 32px;
		height: 32px;
		border-radius: 50%;
	}

	.author-name {
		font-size: 14px;
		color: #1F2937;
	}

	.read-more {
		color: #3B82F6;
		text-decoration: none;
		font-size: 14px;
	}

	.articles {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.article-item {
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;
	}

	.article-img {
		width: 100%;
		height: 160px;
	}

	.article-img image {
		width: 100%;
		height: 100%;
	}

	.article-info {
		padding: 16px;
		box-sizing: border-box;
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.article-stats {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: auto;
		margin-top: 12px;
	}

	.stats {
		display: flex;
		gap: 12px;
		font-size: 12px;
		color: #6B7280;
	}

	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		margin-top: 30px;
	}

	.page-btn {
		width: 32px;
		height: 32px;
		border-radius: 4px;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #6B7280;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}

	.page-number {
		width: 32px;
		height: 32px;
		border-radius: 4px;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #6B7280;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}

	.page-number.active {
		background-color: #3B82F6;
		color: #fff;
	}

	.page-ellipsis {
		font-size: 14px;
		color: #6B7280;
	}

	/* 侧边栏样式 */
	.sidebar {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.sidebar-card {
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		padding: 20px;
		box-sizing: border-box;
	}

	.author-card {
		text-align: center;
	}

	.author-avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		margin: 0 auto 16px;
		border: 4px solid rgba(59, 130, 246, 0.1);
	}

	.author-name {
		font-size: 18px;
		font-weight: bold;
		color: #1F2937;
		display: block;
		margin-bottom: 8px;
	}

	.author-title {
		font-size: 14px;
		color: #6B7280;
		display: block;
		margin-bottom: 12px;
	}

	.author-bio {
		font-size: 14px;
		color: #4B5563;
		line-height: 1.6;
		margin-bottom: 16px;
		display: block;
	}

	.social-links {
		display: flex;
		justify-content: center;
		gap: 12px;
	}

	.social-icon {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background-color: #F3F4F6;
		color: #6B7280;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
	}

	.card-title {
		font-size: 16px;
		font-weight: bold;
		color: #1F2937;
		margin-bottom: 16px;
		display: block;
	}

	.category-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.category-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.category-name {
		font-size: 14px;
		color: #4B5563;
	}

	.category-count {
		font-size: 12px;
		padding: 2px 8px;
		box-sizing: border-box;
		border-radius: 10px;
		background-color: #F3F4F6;
		color: #6B7280;
	}

	.tag-list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.tag {
		font-size: 12px;
		padding: 4px 10px;
		box-sizing: border-box;
		border-radius: 20px;
		background-color: #F3F4F6;
		color: #4B5563;
	}

	.subscribe {
		background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
		color: #fff;
	}

	.subscribe-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 8px;
		display: block;
	}

	.subscribe-desc {
		font-size: 14px;
		opacity: 0.9;
		margin-bottom: 16px;
		display: block;
	}

	.subscribe-form {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.subscribe-input {
		width: 100%;
		border-radius: 4px;
		border: none;
		font-size: 14px;
		color: #fff;
	}

	.subscribe-btn {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 4px;
		border: none;
		background-color: #fff;
		color: #3B82F6;
		font-size: 14px;
		font-weight: 500;
	}

	.subscribe-note {
		font-size: 12px;
		opacity: 0.8;
		text-align: center;
		margin-top: 10px;
		display: block;
	}

	/* 推荐阅读样式 */
	.recommended {
		background-color: #F9FAFB;
		padding: 40px 0;
		box-sizing: border-box;
	}

	.recommended-list {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin-top: 20px;
	}

	.recommended-item {
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;
	}

	.recommended-img {
		width: 100%;
		height: 140px;
	}

	.recommended-info {
		padding: 16px;
		box-sizing: border-box;
	}
</style>